<template>
  <Card title="冲突检测" :bordered="false">
    <div class="conflict-detection">
      <div class="conflict-header">
        <div class="conflict-count">
          <IconifyIcon icon="mdi:alert-triangle" />
          <span>检测到 {{ conflicts.length }} 个冲突</span>
        </div>
        <Button size="small" @click="loadConflicts" :loading="loading">
          刷新
        </Button>
      </div>

      <div v-if="conflicts.length > 0" class="conflict-list">
        <List
          :data-source="conflicts"
          :loading="loading"
          item-layout="vertical"
          size="small"
        >
          <template #renderItem="{ item }">
            <List.Item>
              <div class="conflict-item">
                <div class="conflict-header">
                  <div class="conflict-info">
                    <h4>{{ item.resourceName }}</h4>
                    <Space>
                      <Tag :color="getConflictTypeColor(item.conflictType)">
                        {{ getConflictTypeLabel(item.conflictType) }}
                      </Tag>
                      <Tag :color="getSeverityColor(item.severity)">
                        {{ getSeverityLabel(item.severity) }}优先级
                      </Tag>
                    </Space>
                  </div>
                  <div class="conflict-time">
                    {{ item.createdAt }}
                  </div>
                </div>

                <div class="conflict-description">
                  {{ item.description }}
                </div>

                <div class="affected-bookings">
                  <h5>受影响的预约：</h5>
                  <ul>
                    <li
                      v-for="booking in item.affectedBookings"
                      :key="booking.id"
                      class="booking-item"
                    >
                      <span class="booking-id">{{ booking.id }}</span>
                      <span class="business-type">{{
                        booking.businessType
                      }}</span>
                      <span class="customer">{{ booking.customer }}</span>
                      <span class="time">{{ booking.time }}</span>
                    </li>
                  </ul>
                </div>

                <div class="suggested-solutions">
                  <h5>建议解决方案：</h5>
                  <ul>
                    <li
                      v-for="(solution, index) in item.suggestedSolutions"
                      :key="index"
                      class="solution-item"
                    >
                      {{ solution }}
                    </li>
                  </ul>
                </div>

                <div class="conflict-actions">
                  <Space>
                    <Tooltip
                      v-for="solution in item.suggestedSolutions"
                      :key="solution"
                      :title="`应用方案: ${solution}`"
                    >
                      <Button
                        size="small"
                        type="primary"
                        @click="resolveConflict(item.id, solution)"
                      >
                        应用方案
                      </Button>
                    </Tooltip>
                    <Button size="small" @click="ignoreConflict(item.id)">
                      忽略
                    </Button>
                  </Space>
                </div>
              </div>
            </List.Item>
          </template>
        </List>
      </div>

      <div v-else-if="!loading" class="no-conflicts">
        <IconifyIcon icon="mdi:check-circle" size="48" />
        <p>暂无冲突</p>
      </div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Button, Card, List, Space, Tag, Tooltip } from 'ant-design-vue';

const loading = ref(false);
const conflicts = ref<any[]>([]);

// 加载冲突数据
const loadConflicts = async () => {
  loading.value = true;
  try {
    // 模拟冲突数据
    const mockConflicts = [
      {
        id: '1',
        resourceName: '会议室A',
        resourceType: 'VENUE',
        conflictType: 'TIME_OVERLAP',
        severity: 'HIGH',
        description: '会议室A在14:00-16:00时间段被多个业务同时预约',
        affectedBookings: [
          {
            id: 'B001',
            businessType: 'HOTEL',
            customer: '张经理',
            time: '14:00-16:00',
          },
          {
            id: 'B002',
            businessType: 'TRAINING',
            customer: '李老师',
            time: '14:30-16:30',
          },
        ],
        suggestedSolutions: [
          '将培训课程调整到会议室B',
          '将酒店会议提前到13:00-15:00',
        ],
        createdAt: '2024-03-15 10:30',
      },
      {
        id: '2',
        resourceName: '按摩师张师傅',
        resourceType: 'PERSONNEL',
        conflictType: 'CAPACITY_EXCEEDED',
        severity: 'MEDIUM',
        description: '按摩师张师傅在同一时间段被安排超过其服务能力',
        affectedBookings: [
          {
            id: 'B003',
            businessType: 'HOT_SPRING',
            customer: '王女士',
            time: '15:00-16:00',
          },
          {
            id: 'B004',
            businessType: 'HOT_SPRING',
            customer: '刘先生',
            time: '15:30-16:30',
          },
        ],
        suggestedSolutions: ['安排其他按摩师提供服务', '调整预约时间'],
        createdAt: '2024-03-15 11:15',
      },
      {
        id: '3',
        resourceName: '投影设备',
        resourceType: 'EQUIPMENT',
        conflictType: 'MAINTENANCE_CONFLICT',
        severity: 'LOW',
        description: '投影设备在维护期间仍有预约',
        affectedBookings: [
          {
            id: 'B005',
            businessType: 'TRAINING',
            customer: '培训部',
            time: '09:00-12:00',
          },
        ],
        suggestedSolutions: ['使用备用投影设备', '调整培训时间'],
        createdAt: '2024-03-15 09:45',
      },
    ];

    conflicts.value = mockConflicts;
  } catch (error) {
    console.error('加载冲突数据失败:', error);
  } finally {
    loading.value = false;
  }
};

// 解决冲突
const resolveConflict = (conflictId: string, solution: string) => {
  console.log('解决冲突:', conflictId, solution);
  // 这里可以实现冲突解决逻辑
  conflicts.value = conflicts.value.filter((c) => c.id !== conflictId);
};

// 忽略冲突
const ignoreConflict = (conflictId: string) => {
  console.log('忽略冲突:', conflictId);
  conflicts.value = conflicts.value.filter((c) => c.id !== conflictId);
};

// 辅助函数
const getConflictTypeColor = (type: string) => {
  const colors = {
    TIME_OVERLAP: 'red',
    CAPACITY_EXCEEDED: 'orange',
    MAINTENANCE_CONFLICT: 'yellow',
    RESOURCE_UNAVAILABLE: 'purple',
  };
  return colors[type as keyof typeof colors] || 'default';
};

const getConflictTypeLabel = (type: string) => {
  const labels = {
    TIME_OVERLAP: '时间冲突',
    CAPACITY_EXCEEDED: '容量超限',
    MAINTENANCE_CONFLICT: '维护冲突',
    RESOURCE_UNAVAILABLE: '资源不可用',
  };
  return labels[type as keyof typeof labels] || type;
};

const getSeverityColor = (severity: string) => {
  const colors = {
    HIGH: 'red',
    MEDIUM: 'orange',
    LOW: 'yellow',
  };
  return colors[severity as keyof typeof colors] || 'default';
};

const getSeverityLabel = (severity: string) => {
  const labels = {
    HIGH: '高',
    MEDIUM: '中',
    LOW: '低',
  };
  return labels[severity as keyof typeof labels] || severity;
};

onMounted(() => {
  loadConflicts();
});
</script>

<style scoped>
.conflict-detection {
  padding: 16px;
}

.conflict-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.conflict-count {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ff4d4f;
  font-weight: 500;
}

.conflict-list {
  max-height: 400px;
  overflow-y: auto;
}

.conflict-item {
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  margin-bottom: 12px;
}

.conflict-item .conflict-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  border: none;
  padding: 0;
}

.conflict-info h4 {
  margin: 0 0 8px 0;
  color: #1890ff;
}

.conflict-time {
  font-size: 12px;
  color: #999;
}

.conflict-description {
  margin-bottom: 12px;
  color: #666;
  line-height: 1.5;
}

.affected-bookings,
.suggested-solutions {
  margin-bottom: 12px;
}

.affected-bookings h5,
.suggested-solutions h5 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #333;
}

.affected-bookings ul,
.suggested-solutions ul {
  margin: 0;
  padding-left: 20px;
}

.booking-item {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
  font-size: 12px;
}

.booking-id {
  font-weight: bold;
  color: #1890ff;
}

.business-type {
  color: #52c41a;
}

.customer {
  color: #666;
}

.time {
  color: #999;
}

.solution-item {
  margin-bottom: 4px;
  color: #666;
}

.conflict-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.no-conflicts {
  padding: 40px 20px;
  text-align: center;
  color: #52c41a;
}

.no-conflicts p {
  margin-top: 16px;
  font-size: 14px;
}
</style>
